const path = require('path');
//启动热更新的第2步
const webpack = require('webpack');

//导入在内存中生成HTML页面的插件
//只要是插件，都放到plugins节点中
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    //--open --port 3000 --contentBase src --hot
    open: true,//自动打开浏览器
    port: 3000,//设置端口
    contentBase: 'src',//指定托管的根目录
    hot: true,//启动热更新 的 第1步
    host: '10.138.126.145'

    /* proxy: {
       '/api': {
         target: 'http://www.liulongbin.top:3005',
         secure: false,
         changeOrigin: true
       }
     }*/
  },
  plugins: [//配置插件的节点
    new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象

    new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
      template: path.join(__dirname, './src/index.html'),//指定模板页面
      filename: 'index.html'//指定生成的页面
    })
  ],

  module: {//这个节点用于配置所有的第三方模块加载器
    rules: [//所有第三方模块的匹配规则
      {
        test: /\.css$/,//处理css文件
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,//处理less文件
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.scss$/,//处理scss文件
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,//处理图片路径
        use: 'url-loader?limit=10240 & name=[hash:8]-[name].[ext]'//limit给定的值，是图片的大小，单位是byte
        //如果图片大小小于limit，会被转为base64格式的字符串，如果图片大小大于limit，还是URL格式
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,//处理字体文件
        use: 'url-loader'
      },

      {
        test: /\.js$/,//配置babel
        use: 'babel-loader',
        exclude: /node_modules/
      },

      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },

  resolve: {
    alias: {//修改导入vue的路径
      // "vue$": "vue/dist/vue.js"
    }
  }
};